<template>

  <div class="blocker">
    <img class="image" src="@/assets/test2/demo1.png">
  </div>

</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Test2",
  data() {
    return {
      arrTitle: ["下面我们要进行的是一类分类任务，一会儿在电脑屏幕的中央会呈现一些词语，你的任务是对这些词语进行分类。\n" +
      "分类的时候要尽可能的快，但同时又要尽可能的少犯错误", "如果呈现的是与女性或语言相关的词汇请按F键,如果呈现的是与男性或空间相关的词汇请按J键", "", ""],
      arrCotent: ["", "", "芭比娃娃", "变形金刚"],
      state: [0, 0, 1, 1], // 0为介绍，1为任务
      arrQ: [0, 0, 1, 2],
      curLeval: 0,
      moment1: new Date()
    };
  },

  created: function () {
    const _this = this;
    document.onkeydown = function (event) {
      let key = event.key;
      // 空格键位
      if (_this.state[_this.curLeval] === 0) {
        _this.delta = new Date();
        _this.curLeval += 1;
        return
      }
      if (_this.state[_this.curLeval] === 1 && (key === 'j' || key === 'f')) {
        _this.load(key);
      } else {
        alert("请输入正确的键位")
      }
    };
  },
  watch() {
    //监控leveal达到最新则跳转路由
  },
  computed: {
    states: function () {
      return this.state[this.curLeval] === 1;
    },
    curCotent: function () {
      if (this.states) {
        return this.arrCotent[this.curLeval]
      }
      return this.arrTitle[this.curLeval];
    }
  },
  methods: {
    load: function (key) {
      this.curLeval += 1;
      let data = {"key": key, "delta": new Date() - this.delta};
      console.log(data)
      this.delta = new Date()
    },
  }
}

</script>

<style scoped>
.blocker {
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.image {
  width: 800px;
  height: 800px;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
</style>
